<template>
    <h1>计算属性</h1>

    <p>Has published books:</p>

    <!-- 模板语法形式 -->
    <span>{{ author.books.length > 0 ? 'Yes' : 'No' }}</span>

    <!-- 计算属性形式 不需要加括号 -->
    <span>{{ publishedBooksMessage }}</span>

    <!-- 方法形式 需要加括号-->
    <p>{{ calculateBooksMessage() }}</p>

</template>

<script>
export default {
  data() {
    return {
      author: {
        name: 'John Doe',
        books: [
          'Vue 2 - Advanced Guide',
          'Vue 3 - Basic Guide',
          'Vue 4 - The Mystery'
        ]
      }
    }
  },
  computed: {
    // 一个计算属性的 getter
    publishedBooksMessage() {
      // `this` 指向当前组件实例
      return this.author.books.length > 0 ? 'Yes' : 'No'
    }
  },
  methods: {
    calculateBooksMessage() {
    return this.author.books.length > 0 ? 'Yes' : 'No'
  }
}
}
</script>

<!-- vue3 -->
<!-- <script setup>
import { reactive, computed } from 'vue'
const author = reactive({
    name: 'John Doe',
    books: [
        'Vue 2 - Advanced Guide',
        'Vue 3 - Basic Guide',
        'Vue 4 - The Mystery'
    ]
})

// 一个计算属性 ref
const publishedBooksMessage = computed(() => {
  return author.books.length > 0 ? 'Yes' : 'No'
})
</script> -->
